<template>
  <el-dialog v-if="open" class="dia-style" :close-on-click-modal="false" :title="title" :visible.sync="open" width="900px">
    <hk-form
      ref="formRef"
      :data="form"
      :rules="rules"
      label-position="left"
      :label-width="labelWidth"
      :btn-hidden="btnHidden"
      :dict-list="dictList"
      :form-labels="formLabels"
     
    >
      <template #filter-terminalName>
        <el-select
          v-model="form.terminalName"
          style="width: 100%"
          clearable
          filterable
          :filter-method="terminalFilter"
          @change="changeTerminal"
          @clear="terminalFilter"
        >
          <el-option
            v-for="(item, index) in terminalNameList"
            :key="index"
            :label="item.hostFullName"
            :value="item.hostName"
          />
        </el-select>
      </template>
    </hk-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { queryById, saveOrUpdate, getTerminalList } from '@/api/approval/printBurn.js'

export default {
  components: { HkForm },
  props: {
    title: {
      type: String,
      default() {
        return '标题'
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '150',
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置
      formLabels: [
        {
          label: '终端',
          field: 'terminalName',
          type: 'slot',

          span: 24
        },
        {
          label: '责任人',
          field: 'userFullName',
          type: 'input',
          disabled: true,
          span: 24,
          attrs: {
            min: 0
          }
        },
        {
          label: '打印刻录账号',
          field: 'account',
          type: 'input',
          span: 24
        },
        {
          label: '是否允许打印刻录',
          field: 'isAllowed',
          type: 'select',
          span: 24,
          list: 'foList'
        }
      ],
      dictList: {
        foList: [
          {
            label: '是',
            value: '1'
          },
          {
            label: '否',
            value: '0'
          }
        ],
        terminalNameList: []
      },
      terminalNameList: [],
      form: {},
      // 表单校验
      rules: {
        terminalName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        account: [{ required: true, message: '不能为空', trigger: 'blur' }],
        isAllowed: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {

  },
  created() {},
  methods: {
    show(id) {
      // this.$refs.formRef?.resetForm('formLabels')
      if (!this.terminalNameList.length) { this.getMsgList() }
      if (!id) {
        this.reset()
        this.open = true
      } else {
        queryById(id).then(res => {
          this.form = res
          this.open = true
        })
      }
    },
    getMsgList() {
      getTerminalList().then(res => {
        this.terminalNameList = res
        this.dictList.terminalNameList = res
      })
    },
    // 筛选值
    terminalFilter(val) {
      if (!val) { this.terminalNameList = this.dictList.terminalNameList; return }
      this.form.terminalName = val
      this.terminalNameList = this.dictList.terminalNameList.filter(item => {
        return item.hostName.includes(val) || item.ip.includes(val)
      })
    },

    changeTerminal(val) {
      this.$forceUpdate()
      const item = this.terminalNameList.filter(item => item.hostName === val)
      this.form.userFullName = item[0]?.userFullName
      this.form.userName = item[0]?.userName
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.formRef.handleFormSubmit('formLabels').then((res) => {
        const item = this.terminalNameList.filter(item => item.hostName === this.form.terminalName)[0]
        this.form.ip = item.ip
        this.form.orgName = item.orgName
        saveOrUpdate(this.form).then((response) => {
          if (this.form?.id) {
            this.$modal.msgSuccess('修改成功')
          } else {
            this.$modal.msgSuccess('新增成功')
          }
          this.open = false

          this.$emit('handleSubmit')
        })
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {}

      this.$refs.formRef?.resetForm('formLabels')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-dialog__body {
  height: 300px ;
}
}
</style>
